<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：人员管理页面
* @update: 2023年11月27日10:52:16
-->
<template>
  <div class="container">
    <div class="app-container">
      <div class="material-top form-top">
        <el-form ref="adminForm" :model="adminForm" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录时间">
                <el-date-picker
                  id="starttime"
                 v-model="loginDateTimeRange"
                  type="daterange"
                  unlink-panels
                  :clearable="false"
                  align="center"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"

                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="createDateTimeRange"
                  type="daterange"
                  unlink-panels
                  :clearable="false"
                  align="center"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="姓名">
                <el-input
                  v-model.trim="adminForm.nickName"
                  filterable
                  placeholder="请输入"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="识别模式">
                <el-select
                  v-model="adminForm.identify"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in modelList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-button class="chamfer-98" type="primary" @click="searchBtn"
                >查询</el-button
              >
              <el-button class="chamfer-98" plain @click="resetBtn"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="material-bot table-normal">
        <div class="btnBox">
          <div class="left_btn">
            <el-button type="primary" class="chamfer-98" @click="addBtn">
              <span class="btn-middle">
                <span>新增</span>
                <img class="btn-icon" src="~@/assets/material_img/addBtn.png" />
              </span>
            </el-button>
            <el-button
              type="primary"
              class="chamfer-98 greenBtn"
              @click="importBtn"
            >
              <span class="btn-middle">
                <span>导入</span>
                <img
                  class="btn-icon"
                  src="~@/assets/material_img/importBtn.png"
                />
              </span>
            </el-button>
            <el-button type="primary" class="chamfer-98" @click="downloadBtn">
              <span class="btn-middle">
                <span>下载模版</span>
                <img
                  class="btn-icon"
                  src="~@/assets/material_img/downloadBtn.png"
                />
              </span>
            </el-button>
            <el-button
              type="primary"
              class="chamfer-98 greenBtn"
              @click="editBtn"
            >
              <span class="btn-middle">
                <span>编辑</span>
                <img
                  class="btn-icon"
                  src="~@/assets/material_img/editBtn.png"
                />
              </span>
            </el-button>
            <el-button type="primary" class="chamfer-98" @click="exportBtn">
              <span class="btn-middle">
                <span>导出</span>
                <img
                  class="btn-icon"
                  src="~@/assets/material_img/exportBtn.png"
                />
              </span>
            </el-button>
          </div>
          <div class="right_btn">
            <el-button
              type="primary"
              class="chamfer-98 width168"
              @click="historyBtn"
            >
              <span class="btn-middle">
                <span>历史登录时间</span>
                <img
                  class="btn-icon"
                  src="~@/assets/material_img/timeBtn.png"
                />
              </span>
            </el-button>
            <el-button type="warning" class="chamfer-98" @click="delBtn">
              <span class="btn-middle">
                <span>删除</span>
                <img class="btn-icon" src="~@/assets/material_img/delBtn.png" />
              </span>
            </el-button>
          </div>
          <!-- <el-button type="primary" @click="toggleSelection">
            取消选择
          </el-button> -->
        </div>
        <el-table
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.6)"
          ref="multipleTable"
          :data="adminTable"
          fit
          style="width: 100%"
          header-row-class-name="tableHeader"
          header-cell-class-name="tableTrHeader"
          row-class-name="tableRow"
          cell-class-name="tableCell"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            type="selection"
            width="80"
            label-class-name="DisabledSelection"
          />
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="id" label="工号" show-overflow-tooltip width="240" align="center" />
          <el-table-column prop="dept" label="部门" show-overflow-tooltip width="140" align="center" />
          <el-table-column
            prop="nickName"
            label="姓名"
            width="100"
            align="center"
          />
          <el-table-column
            prop="username"
            label="账号"
            show-overflow-tooltip
            width="140"
            align="center"
          />
          <el-table-column
            prop="loginCount"
            width="100"
            label="登录次数"
            align="center"
          >
            <template v-slot="{ row }">
              {{ row.loginCount || '----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            width="200"
          >
            <template v-slot="{ row }">
              {{ row.createTime || '----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="loginLastTime"
            label="最后登录时间"
            align="center"
            width="200"
          >
            <template v-slot="{ row }">
              {{ row.loginLastTime || '----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="faceRegisterTime"
            label="人脸注册时间"
            align="center"
            width="200"
          >
            <template v-slot="{ row }">
              {{ row.faceRegisterTime || '----' }}
            </template>
          </el-table-column>
          <el-table-column prop="model1" label="人脸" align="center">
            <template v-slot="{ row }">
              <i
                v-if="row.faceRegisterTime"
                class="el-icon-check rightIcon"
              ></i>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="model2" label="指纹" align="center">
            <template v-slot="{ row }">
              --
              <!-- {{ row.model2 ? '√' : '----' }} -->
            </template>
          </el-table-column>
          <el-table-column prop="model3" label="密码" align="center">
            <i class="el-icon-check rightIcon"></i>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <paging-component
          :total="total"
          :page-size="adminForm.currentSize"
          :current-page="adminForm.currentPage"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
      <!-- 人员新增编辑弹窗 -->
      <admin-dialog
        :id.sync="id"
        ref="editMaterial"
        :show-dialog.sync="showDialog"
        :title="title"
        @updateList="renderList"
        @clearFn="handleSelectionClear"
      />
      <!-- 导入excel弹窗 -->
      <import-excel
        modelName="人员"
        :show-excel-dialog.sync="showExcelDialog"
        @importFn="importFn"
      />
      <!-- 历史登录时间弹窗 -->
      <history-login-dialog
        :show-history-login-dialog.sync="showHistoryDialog"
        :idArray.sync="historyArray"
        @clearFn="handleSelectionClear"
      />
      <!-- 删除弹窗 -->
      <del-dialog
        ref="delMaterial"
        :showDelDialog.sync="showDelDialog"
        @delFn="delFn"
      />
    </div>
  </div>
</template>
<script>
import {
  getPersonnelList,
  delPersonnelDetail,
  downloadExportTemplate,
  importExportList,
  exportExportList
} from '@/api/personnelManage'
import { parseTime } from '@/utils'
import adminDialog from './components/adminDialog.vue'
import importExcel from '@/components/ImportExcel/index.vue'
import HistoryLoginDialog from './components/historyLoginDialog.vue'
import pagingComponent from '@/components/PagingComponent/index.vue'
import delDialog from '@/components/delDialog/index.vue'
export default {
  components: {
    adminDialog,
    importExcel,
    HistoryLoginDialog,
    pagingComponent,
    delDialog
  },
  data() {
    return {
      // 人员表单
      adminForm: {
        startLoginTime: '', // 起始时间
        endLoginTime: '', // 截止时间
        startCreateTime: '', // 创建时间
        endCreateTime: '', // 创建时间
        nickName: '', // 姓名
        identify: '', // 模式 1-密码 2-人脸 3-指纹
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      },
      loginDateTimeRange: [],
      createDateTimeRange: [],
      total: 0, // 总条数
      // 识别模式
      modelList: [
        {
          name: '密码',
          value: '1'
        },
        {
          name: '人脸',
          value: '2'
        },
        {
          name: '指纹',
          value: '3'
        }
      ],
      // 物料列表
      adminTable: [],
      showDialog: false, // 控制弹层
      showExcelDialog: false, // 控制excel弹层
      showHistoryDialog: false, // 控制历史登录时间弹层
      showDelDialog: false, // 控制删除弹层
      title: '新增人员', // 弹层标题
      id: '', // 人员id
      historyArray: [], // 历史登录id
      multipleSelection: [], // 表格选中数据
      loading: false
    }
  },
  created() {
    this.renderList()
  },
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    // 获取列表
    async renderList() {
      this.loading = true
      const { result } = await getPersonnelList(this.adminForm)
      this.total = Number(result.totalCount)
      this.adminTable = result.currentData
      this.loading = false
    },
    // 查询
    searchBtn() {
      this.adminForm.currentPage = 1
      if(this.loginDateTimeRange.length>0){
        this.adminForm.startLoginTime = this.loginDateTimeRange[0] + ' 00:00:00';
        this.adminForm.endLoginTime = this.loginDateTimeRange[1] + ' 23:59:59';
      }
      if(this.createDateTimeRange.length>0){
        this.adminForm.startCreateTime = this.createDateTimeRange[0] + ' 00:00:00';
        this.adminForm.endCreateTime = this.createDateTimeRange[1] + ' 23:59:59';
      }
      this.renderList()
    },
    // 重置
    resetBtn() {
      this.adminForm = {
        startLoginTime: '', // 起始时间
        endLoginTime: '', // 截止时间
        startCreateTime: '', // 创建时间
        endCreateTime: '', // 创建时间
        nickName: '',
        identify: '',
        currentPage: 1,
        currentSize: 20
      }
      this.loginDateTimeRange = []
      this.createDateTimeRange = []
      this.renderList()
    },
    // pageSize改变时会触发(每页数据条数)
    handleSizeChange(val) {
      this.adminForm.currentSize = val
      this.renderList()
    },
    // currentPage改变时会触发(当前页码数)
    handleCurrentChange(val) {
      this.adminForm.currentPage = val
      this.renderList()
    },
    // 添加
    addBtn() {
      this.showDialog = true
      this.title = '新增人员'
    },
    // 导入
    importBtn() {
      this.showExcelDialog = true
    },
    async importFn(data) {
      const loading = this.$loading({
          lock: true,
          text: '正在导入中，请耐心等待...',
          background: 'rgba(0, 0, 0, 0.6)'
      });
      await importExportList(data)
        .then((result) => {
          this.showExcelDialog = false
          this.$message({
            type: 'success',
            message: '导入成功'
          })
          this.renderList()
        })
        .catch((err) => {
          this.$message({
            type: 'error',
            message: '导入失败'
          })
        })
        .finally(() => {
          loading.close()
        })
    },
    // 下载
    async downloadBtn() {
      await downloadExportTemplate()
        .then((result) => {
          const content = result
          const blob = new Blob([content], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          }) //处理返回
          const fileName = '人员信息模板.xlsx'
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch((err) => {
          this.$message({
            type: 'error',
            message: '下载失败!'
          })
        })
    },
    // 导出
    async exportBtn() {
      if (this.multipleSelection.length > 0) {
        // 创建一个数组，里面存勾选数据的id
        let delArrayData = []
        this.multipleSelection.forEach((item) => {
          delArrayData.push(item.id)
        })
        await exportExportList({ ids: delArrayData })
          .then((result) => {
            const content = result
            const blob = new Blob([content], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }) //处理返回
            const fileName = '人员信息.xlsx'
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch((err) => {
            this.$message({
              type: 'error',
              message: '导出失败!'
            })
          })
      } else {
        await exportExportList(this.adminForm)
          .then((result) => {
            const content = result
            const blob = new Blob([content], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }) //处理返回
            const fileName = '人员信息.xlsx'
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch((err) => {
            this.$message({
              type: 'error',
              message: '导出失败!'
            })
          })
      }
    },
    // 删除
    delBtn() {
      // 校验：数据应大于一条
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的数据!'
        })
        return
      }
      this.showDelDialog = true
    },
    async delFn() {
      // 创建一个数组，里面存勾选数据的id
      let delArrayData = []
      this.multipleSelection.forEach((item) => {
        delArrayData.push(item.id)
      })
      await delPersonnelDetail(delArrayData)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.showDelDialog = false
      if(this.adminTable.length === this.multipleSelection.length){
        if(this.adminForm.currentPage > 1){
          this.adminForm.currentPage--
        }
      }
      this.renderList()
    },
    // 历史登录时间
    historyBtn() {
      this.showHistoryDialog = true
      if (this.multipleSelection.length >= 1) {
        let checkedArray = []
        this.multipleSelection.forEach((item) => {
          checkedArray.push(item.id)
        })
        this.historyArray = checkedArray
      } else {
        this.historyArray = []
      }
    },
    // 编辑
    editBtn() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          type: 'error',
          message: '只能选择一条数据进行编辑!'
        })
        return
      }
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要编辑的数据!'
        })
        return
      }
      this.showDialog = true
      this.title = '编辑人员'
      this.id = this.multipleSelection[0].id
    },
    // 获取勾选数据表格
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 取消所有勾选
    handleSelectionClear() {
      this.$refs.multipleTable.clearSelection()
      this.multipleSelection = []
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/_handle.scss';
.greenBtn {
  @include background('import_btn_color');
  @include border_color('import_btn_color');
  &:hover {
    @include background('import_btn_color');
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  @include background('table_hover_color');
}
</style>
<style scoped lang="scss">
@import '~@/styles/_handle.scss';
.container{
  height: 100%;
  padding: 24px 30px;
  .app-container {
    width: 100%;
    height: 100%;
    padding: 25px;
    border: 1px solid;
    @include border_image('container_border');
    @include background('content_bg_color');
  }
}

.material-top {
  @include form_bgcolor('form_bgcolor');

}
.rightIcon {
  font-size: 24px;
  font-weight: 700;
  @include font_color('material_edit_color');
}
::v-deep .app-container {

  .material-top {
    padding: 20px;
    height: 142px;
    border-radius: 10px;
    .el-form-item {
      margin-bottom: 16px;
    }
    .chamfer-98 {
      font-size: 18px;
    }
  }
  .material-bot {
    height: calc(100% - 120px);
    padding: 24px 10px;
    .btnBox {
      height: 44px;
      .left_btn,
      .right_btn {
        .chamfer-98 {
          font-size: 18px;
          text-align: center;
          .btn-middle {
            display: flex;
            align-items: center;
            .btn-icon {
              margin-left: 4px;
              width: 16px;
              height: 16px;
            }
          }
          &:nth-child(3n) {
            width: 135px;
          }
        }
        .orangeBtn {
          background: #e2831e;
          border-color: #e2831e;
          &:hover {
            background: #e2831e;
          }
        }
        .width168 {
          width: 168px;
        }
      }
      .left_btn {
        float: left;
      }
      .right_btn {
        float: right;
      }
    }
    .el-table {
      height: calc(100% - 110px);
      .el-table__body-wrapper{
        height: calc(100% - 48px);
        overflow-y: auto;
      }
      .el-table__body-wrapper::-webkit-scrollbar{
        width: 6px;
        height: 8px;
      }
      .tableTrHeader {
        border: none;
      }
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background: #002653;
    }
  }
}
// 暂无数据时展示样式
::v-deep .el-table__empty-block {
  min-height: 240px;
  font-size: 20px;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
</style>
